<template>
  <div class="top-container">
    <div class="left-box">
      <div class="icon-wrapper">
        <span class="iconfont icon-home" @click="$router.replace('/')"></span>
        <span class="iconfont icon-sami-select" @click="windowMin"></span>
        <span class="iconfont icon-full-screen" @click="windowMax"></span>
      </div>
      <div class="history-wrapper">
        <span @click="$router.go(-1)" class="iconfont icon-arrow-lift"></span>
        <span @click="$router.go(1)" class="iconfont icon-arrow-right"></span>
      </div>
    </div>
    <div class="right-box">
      <el-input size="small" @keyup.enter.native="toResult" placeholder="搜索" v-model.trim="query" style="width: 400px;">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </div>
  </div>
  <!-- <div style="display: flex;">
    <div style="background-color: red; width: 200px; height: 100%;"></div>
    <div>
      <el-button round @click="back"><el-icon><ArrowLeft /></el-icon></el-button>
    </div>
  </div> -->
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const query = ref('')

const back = () => {
  router.go("-1")
}

// 跳转到搜索页面
const toResult = () => {
  if (query.value) {
    router.push({ path: '/result', query: { keywords: query.value } })
  }
}

// 窗口最小化
const windowMin = () => {
  window.myApi.sendMsg("window-min")
}

// 窗口最大化
const windowMax = () => {
  window.myApi.sendMsg("window-max")
}
</script>

<style lang="scss">
</style>
